<template>
	<view class="mine-container">
		<!-- 顶部个人信息 -->
		<view class="mine-header">
			<view class="header-bar">
				<view class="header-title">我的</view>
				<view class="header-actions">
					<text class="iconfont icon-more"></text>
				</view>
			</view>
			<view class="user-info">
				<image class="avatar" src="/static/avatar.png" />
				<view class="nickname">刘——</view>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="mine-list">
			<view class="mine-list-item" v-for="(item, idx) in list" :key="idx" @tap="handleItem(item)">
				<view class="item-left">
					<image :src="item.icon" class="item-icon" />
					<view class="item-title">{{ item.title }}</view>
				</view>
				<uni-icons type="right" size="20" color="#bbb"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{ title: '个人资料', icon: '/static/mine-profile.png', action: 'profile' },
					{ title: '我的房屋', icon: '/static/mine-house.png', action: 'house' },
					{ title: '我的车位', icon: '/static/mine-car.png', action: 'car' },
					{ title: '设置', icon: '/static/mine-setting.png', action: 'setting' },
					{ title: '退出登录', icon: '/static/mine-logout.png', action: 'logout', danger: true }
				]
			}
		},
		methods: {
			handleItem(item) {
				if (item.action === 'logout') {
					uni.showModal({
						title: '提示',
						content: '确定要退出登录吗？',
						success: (res) => {
							if (res.confirm) {
								uni.removeStorageSync('jwt');
								uni.reLaunch({ url: '/pages/login/login' });
							}
						}
					});
				} else {
					uni.showToast({ title: `点击了：${item.title}`, icon: 'none' });
					// 这里可以根据 action 跳转到对应页面
				}
			}
		}
	}
</script>

<style>
	.mine-container {
		min-height: 100vh;
		background: #f6f8fa;
		padding-bottom: 60rpx;
	}
	.mine-header {
		background: linear-gradient(90deg, #4A90E2 0%, #87CEEB 100%);
		border-bottom-left-radius: 32rpx;
		border-bottom-right-radius: 32rpx;
		padding-bottom: 56rpx;
		position: relative;
	}
	.header-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
		height: 80rpx;
	}
	.header-title {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
	}
	.header-actions .iconfont {
		font-size: 36rpx;
		color: #fff;
	}
	.user-info {
		display: flex;
		align-items: center;
		margin-top: 12rpx;
		padding-left: 36rpx;
	}
	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 4rpx solid #fff;
		background: #fff;
		margin-right: 24rpx;
	}
	.nickname {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
		letter-spacing: 2rpx;
	}
	.mine-list {
		margin: 24rpx 24rpx 0 24rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(74,144,226,0.08);
		padding: 8rpx 0;
	}
	.mine-list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		height: 90rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	.mine-list-item:last-child {
		border-bottom: none;
	}
	.item-left {
		display: flex;
		align-items: center;
	}
	.item-icon {
		width: 44rpx;
		height: 44rpx;
		margin-right: 18rpx;
	}
	.item-title {
		font-size: 28rpx;
		color: #333;
	}
	.mine-list-item:last-child .item-title,
	.mine-list-item:last-child .item-icon {
		color: #e64340;
	}
	.icon-arrow-right {
		font-size: 32rpx;
		color: #bbb;
	}
</style>
